防抖

防抖主要用来防止用户快速操作，导致一些不必要的计算。例如如果有人进电梯（触发事件），那电梯将在 10 秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在 10 秒内再次触发该事件），我们又得等 10 秒再出发（重新计时）。

示例

假如我们给一个按钮点击事件加上了节流，然后我们以小于间隔时间的频率连续点击按钮，那么按钮回调处理函数只会在点击结束后执行一次。

查看源码

<template>
  <button @click="click">点击我，然后在控制台查看效果</button>
</template>

<script>
import debounce from './debounce'
export default {
  name: 'debounce-demo',
  methods: {
    click: debounce(function () {
      console.log('点击回调')
    }, 1000, true)
  }
}
</script>

代码实现

/**
 * 防抖
 * @param {*} fn 回调函数
 * @param {*} delay 间隔大小
 * @param {*} immediate 第一次是否立即回调
 */
export default function debounce(fn, delay, immediate) {
  let timer
  return function (...args) {
    clearTimeout(timer)
    if (immediate && timer === undefined) {
      fn.apply(this, args)
    }
    timer = setTimeout(() => {
      timer = undefined
      fn.apply(this, args)
    }, delay)
  }
}